<template>
  <div class="menulist" :class="isSearch ? '' : 'active'">
    <ul>
      <li
        :class="isIncludes(item.path) ? 'active' : ''"
        v-for="item in navbarList"
        :key="item.id"
        @click.stop="goNewPage(item.path)"
      >
        {{ item.title
        }}<span
          class="iconfont icon-fangxiangxia"
          v-if="item.children?.length > 0"
        ></span>
        <ul v-if="item.children?.length > 0">
          <li
            :class="isIncludes(citem.path) ? 'active' : ''"
            v-for="citem in item.children"
            :key="citem.id"
            @click.stop="goNewPage(citem.path)"
          >
            {{ citem.title }}
            <ul>
              <li
                :class="isIncludes(ccitem.path) ? 'active' : ''"
                v-for="ccitem in citem.children"
                :key="ccitem.id"
                @click.stop="goNewPage(ccitem.path)"
              >
                {{ ccitem.title }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <span class="iconfont icon-sousuo_o" @click="handleIsOpenSearch"></span>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  props: {
    navbarList: Array,
  },
  data() {
    return {
      activePathArr: [],
    };
  },
  computed: {
    ...mapState(["isSearch"]),
  },
  created() {
    this.activePathArr = this.$cookies.get("activePathArr")
      ? this.$cookies.get("activePathArr")
      : ["/"];
  },
  methods: {
    ...mapMutations(["handleIsOpenSearch"]),
    async goNewPage(path) {
      this.$router.push(path);
    },
    isIncludes(path) {
      let is = false;
      for (let i = 1; i < this.activePathArr.length; i++) {
        if (this.activePathArr[i].path == path) {
          is = true;
        }
      }
      return is;
    },
  },
};
</script>

<style lang="less" scoped>
.menulist {
  position: absolute;
  width: 100%;
  height: 64px;
  line-height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
  z-index: 99;
  ul {
    display: flex;
    cursor: pointer;
    li {
      position: relative;
      padding: 0 14px;
      font-size: 14px;
      &:hover {
        color: #3361ea;
        > ul {
          transform: rotateX(0);
        }
        span {
          transform: rotate(-180deg);
        }
      }
      ul {
        position: absolute;
        min-width: 120px;
        flex-direction: column;
        margin-left: -14px;
        margin-top: -1px;
        box-sizing: border-box;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
        transform: rotateX(-90deg);
        transform-origin: 0 0;
        li {
          line-height: 32px;
          color: #000;
          background: #fff;
          &:hover {
            color: #fff;
            background: #1162e8;
            ul {
              overflow: initial;
            }
          }
          ul {
            position: absolute;
            top: 0;
            left: 134px;
            z-index: 1;
            overflow: hidden;
            li {
              min-width: 120px;
              padding: 0 10px 0 14px;
            }
          }
        }
      }
      span {
        display: inline-block;
        transition: transform 0.3s;
        transform: rotate(0);
      }
    }
    li.active {
      color: #08c;
      span {
        color: initial;
      }
    }
  }
  > ul {
    > li.active {
      &:hover {
        color: #3361ea;
      }
    }
    > li {
      > ul {
        &::before {
          content: "";
          border-top: 1px solid rgba(235, 235, 235, 0.589);
          border-left: 1px solid rgba(235, 235, 235, 0.589);
          position: absolute;
          left: 35%;
          top: -6px;
          display: block;
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          background: #fff;
        }
      }
    }
  }
  > .iconfont {
    font-size: 20px;
    margin-right: 14px;
    font-weight: bold;
    cursor: pointer;
    &:hover {
      color: #3361ea;
    }
  }
}
.menulist.active {
  z-index: 90;
}
</style>